<template>
  <div>
    <footer class="footer" v-show="todoList.length" v-cloak>
      <span class="todo-count">
        <strong>{{ 123 }}</strong> left
      </span>
      <ul class="filters">
        <li>
          <a href="#/all">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button class="clear-completed">Clear completed</button>
    </footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("todo", ["todoList"]),
  },
};
</script>

<style scoped  src="../todo.css">
</style>